<template>
  <starPage :ref="ref" :config="{...pageDefaultConfig,config}" @middleMenu="copyConfig">
    <template #leftCard>
      <hierTree :data="assetList" v-bind="assetTree"
        @select="select"
        @onload="assetLoad"
        @menu="menu">
      </hierTree>
    </template>
    <template #middleCard>
      <jsonEditor v-if="current&&current.bind" :config="jsonConfig" :code="current.bind" @change="current.bind=$event"></jsonEditor>
    </template>
    <div slot="rightCard" style="width:100%;height:100%;padding:0px 24px;position: relative;">
      <AtomElement v-if="current" :element="asset[0]" :elements="asset" :class="{'page-edit-status':current.tag==='starPage'}"></AtomElement>
    </div>
    
  </starPage>
</template>

<script>
const ref = "starPageCfg";
export default {
  name:ref,
  components: {
    // MonacoEditor
  },
  inject: ["anc"],
  data() {
    return {
      ref,
      current:null,
      jsonConfig:{
        readonly:false,
        error:false
      },
      asset:[
        
      ],
      assetList:[]
      
    };
  },
  props: {
    config:{
      default:()=>{
        return {}
      }
    }
  },
  watch: {},
  computed: {
    pageDefaultConfig(){
      return {
        title:"",
        icon:'',
        split:true,
        cols:[4,6,14],
        left:{
          title:'布局'
        },
        middle:{
          title:'配置',
          menu:[
            {title:'当前配置'},
            {title:'全部配置'}
          ]
        },
        right:{
          title:'预览'
        }
      }
    },
    assetTree(){
        return {
            title:{
                "en-US":'AAA',
                "zh-CN": 'AAA'
            }[this.G_Locale],
            rootId:'root',
            nameId:'id',
            namePid:'parentId',
            nameTitle:'tag',
            rootEnable:false,
            menuEnable:true,
            addEnable:false,
            removeEnable:false,
            menus:[
                {
                    title:'添加:starSection',
                    disabled:false,
                },
                {
                    title:'添加:starTabs',
                    disabled:false,
                },
                {
                    title:'添加:hierTree',
                    disabled:false,
                },
                {
                    title:'添加:starTable',
                    disabled:false,
                },
                {
                    title:'添加:AtomBasicTable',
                    disabled:false,
                },
                {
                    title:'添加:AtomTable',
                    disabled:false,
                },
                {
                    title:'添加:starForm',
                    disabled:false,
                },
                {
                    title:'添加:AtomForm',
                    disabled:false,
                },
                {
                    title:'添加:AtomSearchForm',
                    disabled:false,
                },
                {
                    title:'添加:starList',
                    disabled:false,
                },
                {
                    title:'添加:AtomUl',
                    disabled:false,
                },
                {
                    title:'删除',
                    menuStyle:{color:'red',fontWeight:'bold'},
                    disabled:false,
                }
            ]
        }
    },
    starPageConfig(){
      return {
        title:'abc',//页面标题,如果为空，则标题栏不显示
        icon:'ios-paper-outline',//标题头图标，单击可展开drawer
        split:false,//如果两列配置，可以选则分割线模式，左右比例按照cols的配置
        drawer:false,//是否显示drawer
        titleStyle:{},//标题栏样式
        cols:[24],//如果为null，则表示单列，自带自动滚动条；最多3列;如果为一个元素则以左侧配置为Card显示
        contentStyle:{},//内容区样式
        left:{//左列Card配置
            icon:'md-apps',//标题头图标
            title:'',//标题；如果icon和title都为空，则不显示标题头
            height:'100%',//Card高度
            shadow:false,//Card阴影
            hover:true,//Card悬浮
            extra:[//标题头右侧菜单，为横排文字菜单，以竖行分割
                {
                    title:'',//标题
                    style:{},//样式
                }
            ],
            menu:[//标题图标点击时显示的下拉菜单
                {
                    title:'',//标题
                    style:{},//样式
                }
            ]
        },
        middle:{
            icon:'md-apps',
            title:'',
            height:'100%',
            shadow:false,
            hover:true,
            extra:[],
            menu:[]
        },
        right:{
            icon:'md-apps',
            title:'',
            height:'100%',
            shadow:false,
            hover:true,
            extra:[],
            menu:[]
        }
      }
    },
    starSectionConfig(){
      return {
        split:false,//如果两列配置，可以选则分割线模式，左右比例按照cols的配置
        drawer:false,//是否显示drawer
        cols:[12,12],//如果为null，则表示单列，自带自动滚动条；最多3列;如果为一个元素则以左侧配置为Card显示
        left:{//左列Card配置
            icon:'md-apps',//标题头图标
            title:'',//标题；如果icon和title都为空，则不显示标题头
            height:'100%',//Card高度
            shadow:false,//Card阴影
            hover:true,//Card悬浮
            extra:[//标题头右侧菜单，为横排文字菜单，以竖行分割
                {
                    title:'',//标题
                    style:{},//样式
                }
            ],
            menu:[//标题图标点击时显示的下拉菜单
                {
                    title:'',//标题
                    style:{},//样式
                }
            ]
        },
        middle:{
            icon:'md-apps',
            title:'',
            height:'100%',
            shadow:false,
            hover:true,
            extra:[],
            menu:[]
        },
        right:{
            icon:'md-apps',
            title:'',
            height:'100%',
            shadow:false,
            hover:true,
            extra:[],
            menu:[]
        }
      }
    },
    starTabsConfig(){
      return {
        config:{
            name:'json',//tabs的名称，tabs嵌套使用时，必须唯一
            value:'0',//tabs的默认页码
            type:'card',//tabs类型,line和card
            style:{height:'60vh'},//tabs样式
            menu:false,//是否显示菜单
            menus:[//菜单配置，DropdownItem配置
                {
                    title:'',//菜单文本
                    menuStyle:{}
                }
            ],
            extra:{
                icon:'md-apps',//额外菜单图标
                style:{},//额外菜单样式
                items:[//额外菜单项
                    {
                        title:'',//菜单文本
                        style:{}//菜单样式
                    }
                ],
            },
            tabs:[
                {
                    icon:'',//图标
                    label:'',//标签
                    menu:true//是否显示菜单
                },
            ]
        }
    }
    },
    hierTreeConfig(){
      return {
        rootEnable:true,//是否显示根节点
        title:'title',//根节点标题
        rootId:'root',//根节点id
        //子节点配置
        nameId:'id',//节点id字段名
        nameTitle:'title',//节点标题字段名
        namePid:'parentId',//节点父节点id字段名
        menuEnable:true,//是否显示菜单
        addEnable:true,//是否显示添加按钮
        removeEnable:true,//是否显示删除按钮;根节点不支持删除
        rootRender:null,//自定义根节点渲染函数,传入函数如(h, { root, node, data })=>{},渲染优先级为data项优先级最高
        childrenRender:null,//自定义子节点渲染函数,传入函数如(h, { root, node, data })=>{},渲染优先级为data项优先级最高
        menus:[//自定义菜单配置，菜单配置参考DropdownItem
            {
                title:'菜单1',//菜单标题
                disabled:false,//是否禁用
                menuStyle:{}//菜单样式
            }
        ],
        data:[
          {
            id:'1',
            parentId:'root',//父节点id
            show:true,//是否显示
            title:'',//标题
            render:(h, { root, node, data })=>{},//自定义渲染
        }
        ]//父子层级结构数据
      }
    },
    starFormConfig(){
      return {
        labelWidth:100,//标签宽度
        labelPosition:'right',//标签位置
        cols:3,//列数
        onlyRead:false,//是否只读，如果只读则显示span
        sync:false,//是否同步
        columns:[//字段配置
            {
                key:'',//字段名，可以是路径字符串
                title:'',//标题
                line:false,//是否占满一行
                config:{//编辑器配置，如果不配置，则默认为只读输入框
                    type:'',//类型

                }
            }
        ],
        rules:{},
        data:{}
      }
    },
    starTableConfig(){
      return {
        config:{
            autoHeight:true,//是否自动计算高度
            search:true,//是否显示搜索面板
            addButton:true,//是否显示添加按钮
            batchDeleteButton:true,//是否显示批量删除按钮
            downloadIcon:true,//是否显示下载按钮
            uploadIcon:true,//是否显示上传按钮
            uploadUrl:'/',//上传地址
            tableSizeIcon:true,//是否显示表格大小切换按钮
            fullscreenIcon:true,//是否显示全屏切换按钮
            refreshIcon:true,//是否显示刷新按钮
            columnSettingIcon:true,//是否显示列设置按钮
            action:true,//是否显示操作列
            additionalAction:true,//是否显示额外操作列
            navigation:true,//是否显示导航栏
            checkColumnDisabled:true,//是否显示勾选框
        },
        loading:false,//是否显示加载中提示
        tableStyle:{},//表格样式
        tableTitle:'',//表格标题
        pageSizeOpts:[10, 30, 50, 100],//分页大小配置
        pageNavigation:{ //分页配置
            total: 0,
            pageSize: 10,
            pageNumber: 1
        },
        columns:[//列配置
            {
                key: '',
                title: '',
                minWidth: 100,
                align: 'center',
                show: true,
                config:{//单元格类型配置，如果无配置，则默认为span类型
                    type:'span',//fieldCelll类型，如果是span则仅显示；也可以是函数，参数为row,column,index
                    text:'',//row[col.key],//单元格文本配置；也可以是函数，参数为row,column,index
                    attrs:{//单元格属性配置；也可以是函数，参数为row,column,index

                    },
                    style:{//单元格样式配置；也可以是函数，参数为row,column,index
                    }
                }
            }
        ],
        additionalAction:{
            key: 'additionalAction',
            title: 'additionalAction',
            slot: 'additionalAction',
            width: 200,
            fixed:'right',
            align: 'center',
            show: true,
              buttons:[
                {
                    title:'',//按钮标题
                    style:{},//按钮样式
                    event:(row, index)=>{}//按钮事件
                }
              ]
        },
        queryFormItem:[

        ],
        collapseFormItem:[

        ],
        btnShowFun:(row,key)=>{},//按钮显示函数
        rowbgc:'red',//行背景颜色
      }
    },
    AtomBasicTableConfig(){
      return {
        config:{
          stripe: true, //条纹
          size: "default", //尺寸
          loading: false, //是否加载
          rowClassName: '', //行样式
          tableHeight: 'auto', //表高
          style: {},
          checkColumn:true,
          numberColumn:true,
          action:true,
          additionalAction:true,
          actionFn:(row,column,index,item)=>{return true;},
          additionalActionFn:(row,column,index,item)=>{
            if(row.name==='panhao'){
              item['disabled'] = true;
            }else{
              item['disabled'] = false;
            }
            return true;
          },
        },
        columns:[
          {
            key: 'name',
            title: '姓名',
            width: 'auto',
            align: 'center',
            show: true,
            config:{
              editor:{
                type:'text'
              }
            }
          }
        ],
        additionalAction:{
          key: 'additionalAction',
          title: 'additionalAction',
          slot: 'additionalAction',
          width: 200,
          fixed:'right',
          align: 'center',
          buttons:[
            {
                title:'abc',//按钮标题
                style:{},//按钮样式
                event:(row,column,index,item)=>{}//按钮事件
            }
          ]
        },
        data:[
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
        ]
      }
    },
    AtomTableConfig(){
      return {
        query:{
          show:false,
          labelWidth:100,//label宽度
          labelPosition:'right',//label位置
          cols:3,//一行几列
          onlyRead:false,//是否只读
          collapse:false,
          columns:[
            {
              title:'字段标题',//字段标题
              key:'key',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              default:{
                value:'',
                empty:false,
                logic:'&&',
                operator:'>'
              },
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            },
            {
              title:'字段名称',//字段标题
              key:'name',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              default:{
                value:'',
                empty:false,
                logic:'&&',
                operator:'>'
              },
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            }
          ],//字段列表
          rules:{},
        },
        queryData:{key:'',name:""},//数据
        table:{
          config:{
            autoHeight:true,
            stripe: true, //条纹
            size: "default", //尺寸
            loading: false, //是否加载
            rowClassName: '', //行样式
            tableHeight: 'auto', //表高
            style: {},
            checkColumn:true,
            numberColumn:true,
            action:true,
            additionalAction:true,
            sort:{
              asc:[],
              desc:[]
            },
            actionFn:(row,column,index,item)=>{return true;},
            additionalActionFn:(row,column,index,item)=>{
              if(row.name==='panhao'){
                item['disabled'] = true;
              }else{
                item['disabled'] = false;
              }
              return true;
            },
          },
          columns:[
            {
              key: 'name',
              title: '姓名',
              width: 'auto',
              align: 'center',
              show: true,
              sort:'asc',
              // config:{
              //   editor:{
              //     type:'text'
              //   }
              // }
            }
          ],
          additionalAction:{
            key: 'additionalAction',
            title: 'additionalAction',
            slot: 'additionalAction',
            width: 200,
            fixed:'right',
            align: 'center',
            buttons:[
              {
                  title:'abc',//按钮标题
                  style:{},//按钮样式
                  event:(row,column,index,item)=>{}//按钮事件
              }
            ]
          },
          
        },
        navigation:{
            show:false,
            opts:[10, 30, 50, 100],
            page:{ total: 0, pageSize: 10, pageNumber: 1 }
          },
        data:[
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
          {name:'abc'},
          {name:'abc1'},
          {name:'panhao'},
        ],
        tools:{
          addButton: true,
          batchDeleteButton: true,
          searchIcon:true,
          downloadIcon: true,
          uploadIcon: true,
          uploadUrl: "/",
          tableSizeIcon: true,
          fullscreenIcon: true,
          refreshIcon: true,
          columnSettingIcon: true,
          columnSortIcon:true,
          buttons:[
            {title:'abc',event:(btn)=>{console.log(btn)}}
          ]
        }
      }
    },
    starListConfig(){
      return {
        config:{
            border:false,//是否显示边框
            'item-layout':'vertical',//列表布局
            header:'',//列表头部
            footer:'',//列表尾部
            loading:false,//是否显示加载中
            size:'default',//列表大小
            split:true,//是否显示分割线
            mapto:{//配置与数据的对照表
                avatar:'avatar',//头像
                title:'title',//标题
                description:'description'//描述
            },
            itemStyle:{},//列表项样式
            action:[//每个条目重复的操作按钮配置
                {
                    title:'',//按钮文本
                    style:{},//按钮样式
                }
            ],
            extra:true,//是否显示额外操作
        },
        data:[
          {title:'abc',description:'aaa'}
        ]
      }
    },
    AtomFormConfig(){
      return {
        config:{
          labelWidth:100,//label宽度
          labelPosition:'right',//label位置
          cols:3,//一行几列
          onlyRead:false,//是否只读
          sync:true,//是否同步
          columns:[
            {
              title:'字段标题',//字段标题
              key:'key',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            }
          ],//字段列表
          rules:{},
        },
        data:{key:'abc'}//数据
      }
    },
    AtomSearchFormConfig(){
      return {
        config:{
          show:true,
          labelWidth:100,//label宽度
          labelPosition:'right',//label位置
          cols:3,//一行几列
          onlyRead:false,//是否只读
          collapse:false,
          columns:[
            {
              title:'字段标题',//字段标题
              key:'key',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              default:{
                value:'',
                empty:false,
                logic:'&&',
                operator:'>'
              },
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            },
            {
              title:'字段名称',//字段标题
              key:'name',//字段key
              line:false,//是否独占一行
              titleStyle:{},
              default:{
                value:'',
                empty:false,
                logic:'&&',
                operator:'>'
              },
              tip:{
                icon:'md-information',
                size:16,
                iconStyle:{},
                theme:'light',
                placement:'top',
                content:'',
                contentStyle:{}
              },
              config:{//编辑器配置，可以是函数，参数为(item,index,data)
                  editor:{//编辑器配置
                      type:'text',//编辑器类型
                  },
                  style:{//样式配置
                  },
              },
              rules:[{required:true,type:'string',message:'必填',trigger:['change','blur']}]
            }
          ],//字段列表
          rules:{},
        },
        data:{key:'abc',name:"qqq"}//数据
      }
    },
    AtomUlConfig(){
      return {
        config:{
          selected:'',
        },
        rootPid:'root',//根节点id
        items:[
          {
            id:'1',
            pid:'root',//父节点id
            condition:true,
            icon:'',
            iconStyle:{},
            title:'abc',
            titleStyle:{},
            style:{}
          },
          {
            id:'2',
            pid:'1',//父节点id
            condition:true,
            icon:'',
            iconStyle:{},
            title:'abc2',
            titleStyle:{},
            style:{}
          },
          {
            id:'3',
            pid:'1',//父节点id
            condition:true,
            icon:'',
            iconStyle:{},
            title:'abc2',
            titleStyle:{},
            style:{}
          },
          {
            id:'4',
            pid:'2',//父节点id
            condition:true,
            icon:'',
            iconStyle:{},
            title:'abc2',
            titleStyle:{},
            style:{}
          },
          {
            id:'5',
            pid:'3',//父节点id
            condition:true,
            icon:'',
            iconStyle:{},
            title:'abc2',
            titleStyle:{},
            style:{}
          }
        ]
      }
    },
    slotMap(){
      return {
        starPage:[
          'default',
          'left',
          'middle',
          'right',
          'leftCard',
          'middleCard',
          'rightCard',
          'others',
          'drawer',
          'menu',
        ],
        starSection:[
          'default',
          'left',
          'middle',
          'right',
          'leftCard',
          'middleCard',
          'rightCard',
          'others',
          'drawer',
        ],
        starTabs:[
          '0',
          '1',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      this.asset.push(
        {id:'1',parentId:'root',tag:'starPage',slot:'default',render:this.treeRender,bind:{config:this.starPageConfig}}
      )
      this.assetList.push(
        {id:'1',parentId:'root',tag:'starPage',slot:'default'}
      )
      
    });
  },
  methods: {
    assetLoad(tree){
      this.tree = tree;
      tree.handleSelect(0)
    },
    treeRender(h, { root, node, data }){
      let that = this;
      return h('div',{
        style:{
          display:'flex',
          alignItems:'center',
          width:'100%'
        }
      },[
        h('span',data.title),
        h('i-Select',{
          style:{
            width:'100px',
            margin:'0px 5px '
          },
          domProps:{
            innerHtml:node.node.data.slot
          },
          on:{
            'on-change':(val)=>{
              this.assetList.find((e)=>e.id===data.id).slot=val;
              this.asset.find((e)=>e.id===data.id).slot=val;
            }
          }
        },this.slotMap[data.data.parentTag].map(o=>{
          return h('Option',{
            props:{
              value:o
            },
            domProps:{
              innerHtml:o
            }
          })
        }))
      ])
    },
    click(){
      
    },
    select(item){
      this.current = this.asset.find((e)=>e.id===item.id);
    },
    remove(current){
      let id = current.id;
      if(current.parentId==='root'){
        return;
      }else{
        this.tree.handleSelect(0)
        this.assetList = this.assetList.filter(t=>![id].includes(t.id));
        this.asset = this.asset.filter(t=>![id].includes(t.id));
        this.findAssetChildren([id])
        this.findAssetListChildren([id])
        
      }
    },
    menu(item,current){
      let id = this.uuid();
      let listItem,assetItem;
      if(item.title==='添加:starSection'){
        listItem = {id:id,parentId:current.id,tag:'starSection',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:{config:this.starSectionConfig}}
      }else if(item.title==='添加:starTabs'){
        listItem = {id:id,parentId:current.id,tag:'starTabs',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.starTabsConfig}
      }else if(item.title==='添加:hierTree'){
        listItem = {id:id,parentId:current.id,tag:'hierTree',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.hierTreeConfig}
      }else if(item.title==='添加:starTable'){
        listItem = {id:id,parentId:current.id,tag:'starTable',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.starTableConfig}
      }else if(item.title==='添加:AtomBasicTable'){
        listItem = {id:id,parentId:current.id,tag:'AtomBasicTable',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.AtomBasicTableConfig}
      }else if(item.title==='添加:AtomTable'){
        listItem = {id:id,parentId:current.id,tag:'AtomTable',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.AtomTableConfig}
      }else if(item.title==='添加:starForm'){
        listItem = {id:id,parentId:current.id,tag:'starForm',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.starFormConfig}
      }else if(item.title==='添加:starList'){
        listItem = {id:id,parentId:current.id,tag:'starList',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.starListConfig}
      }else if(item.title==='添加:AtomForm'){
        listItem = {id:id,parentId:current.id,tag:'AtomForm',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.AtomFormConfig}
      }else if(item.title==='添加:AtomSearchForm'){
        listItem = {id:id,parentId:current.id,tag:'AtomSearchForm',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.AtomSearchFormConfig}
      }else if(item.title==='添加:AtomUl'){
        listItem = {id:id,parentId:current.id,tag:'AtomUl',parentTag:current.tag,render:this.treeRender,slot:'default'};
        assetItem = {...listItem,bind:this.AtomUlConfig}
      }else if(item.title==='删除'){
        this.remove(current)
        return;
      }
      this.assetList.push(listItem);
      this.asset.push(assetItem);
    },
    findAssetListChildren(ids){
      let children = [];
      this.assetList.map(item=>{
        if(ids.includes(item.parentId)){
          children.push(item.id)
        }
      });
      if(children.length>0){
        this.assetList = this.assetList.filter(t=>!children.includes(t.id));
        this.findChildren(children)
      }

    },
    findAssetChildren(ids){
      let children = [];
      this.asset.map(item=>{
        if(ids.includes(item.parentId)){
          children.push(item.id)
        }
      });
      if(children.length>0){
        this.asset = this.asset.filter(t=>!children.includes(t.id));
        this.findChildren(children)
      }

    },
    uuid (length = 8) {
      return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
    },
    copyConfig(item){
      if(item.title==='当前配置'){
        let config={};
        config[this.current.tag] = this.current.bind;
        this.tools.copyJsonToClipboard(config)
      }else if(item.title==='全部配置'){
        let all = [];
        this.asset.map(item=>{
          all.push({
            id:item.id,
            parentId:item.parentId,
            tag:item.tag,
            slot:item.slot,
            bind:item.bind
          })
        });
        this.tools.copyJsonToClipboard(all)
      }
    }
    
  }
};
</script>
<style scoped lang="scss">
.page-edit-status {
  ::v-deep div {
    & .ivu-affix {
      position: relative !important;
      top:0px !important;
    }
  }
  
}
</style>